<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vfor中的key&&event $on$emit</title>
    <style>
        .list-item {border:1px solid purple;margin: 10px;padding: 5px;}
    </style>
</head>
<body>
    <div id="app"></div>
    <script src="./js/vue.js"></script>
    <script>
        const EVENT = new Vue({})
        Vue.component('my-com',{
            template:`
                <div class="list-item">
                    <div class="content-wrap">
                        <h3 class="name"> {{item.name}} </h3>    
                        <div class="content"> {{item.content}} </div>
                    </div>
                    <div class="input-wrap">
                        <input type="text" placeholder="请输入">
                    </div>
                </div>
            `,
            props:{
                item:Object
            }
        })
        const A = {
            template:`
                <div class="wrap">
                    <div> {{a}}</div>
                    <input type="button" @click="sendData" value="btnA">
                </div>
            `,
            data () {A
                return {
                    a:'data from A component'
                }
            },
            methods:{
                sendData() {
                    EVENT.$emit('sendFromA',this.a)
                    this.$emit('thisEmit',this.a)
                }
            }
        }

        const B = {
            template:`
                <div class="wrap">
                    <div>this is component B</div>    
                    <input type="button" @click="sendData" value="btnB">
                </div>
            `,
            data() {
                return {
                    b:'this is data from component B'
                }
            },
            methods: {
                sendData() {
                    EVENT.$emit('sendFromB',this.b)
                }
            }
        }
        const C = {
            template:`
            <div class="wrap">
                <div>来自A的数据 {{fromA}} </div>    
                <div>来自C的数据 {{fromB}} </div>    
            </div>
            `,
            data() {
                return {
                    fromA:'',
                    fromB:''
                }
            },
            mounted() {
                this.eventListener()
            },
            methods:{
                eventListener() {
                    EVENT.$on('sendFromA', data=>{
                        this.fromA  = data
                    })
                    EVENT.$on('sendFromB',data => {
                         this.fromB = data
                    })
                }
            }
        }
        
        const App = {
            data() {
                return {
                    datas:[
                        {
                            name:'张三丰',
                            content:'太极高手！武当创始人',
                            id:1
                        },
                        {
                            name:'郭靖',
                            content:'侠之大者为国为民',
                            id:2
                        },
                        {
                            name:'萧峰',
                            content:'降龙十八掌',
                            id:3
                        }
                    ]
                }
            },
            template:`
                <div>
                    <button @click="changeOrder">改变顺序</button>    
                    <my-com v-for="item in datas" :item="item" :key="item.id" />
                    <A @thisEmit="thisEmit"></A>
                    <B></B>
                    <C></C>
                </div>
            `,
            methods:{
                changeOrder() {
                    this.datas = this.datas.reverse()
                },
                thisEmit(data) {
                    console.log(data)
                }
            },
            components:{A,B,C}
        }
        
        const app = new Vue({
            el:"#app",
            data:{
                
            },
            components:{
                App
            },
            template:`<App/>`,
            methods:{
                test() {
                    console.log(this)
                }
            }
        })
    </script>
</body>
</html>